<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验1</title>
		<style>
			#div1{
				width: 300px;
				height: 260px;
				margin: 0 auto;
				overflow: hidden;
			}
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<img src="img/1.webp" id="banner">
			
		</div>
		<div><button>随机换照片</button></div>
		
		<script>
			var btn1 = document.getElementsByTagName("button")[0];
			btn1.onclick = fun1;
			function fun1() {
				var i = Math.floor(Math.random()*4+1);
				console.log(i);
				banner.src="img/"+i+".webp"
			}
		</script>
	</body>
</html>